<template>
  <div :class="switchValue == '' ? 'home_dark' : 'home_' + switchValue">
    <div class="second-page">
      <div class="wrap" style="padding: 0">
        <headerCom2></headerCom2>
      </div>
      <div class="banner">
        <div class="wrap">
          <div class="banner-left-title">
            <p>{{ curMenu }}</p>
          </div>
          <div
            class="banner-right-crumbs"
            style="
              width: 69%;
              display: inline-flex;
              justify-content: space-between;
              align-items: center;
            "
          >
            <p style="color: #fff">您的位置：首页 > {{ curMenu }}</p>
            <div
              class="header-search-box"
              style="display: flex; align-items: center"
            >
              <el-input
                style="border-radius: 0 !important"
                placeholder="请输入搜索关键字"
                v-model="keyWords"
              ></el-input>
              <el-button
                class="el_buggssf"
                style="border-radius: 0 !important"
                type="primary"
                icon="el-icon-search"
                @click="search"
              ></el-button>
            </div>
          </div>
        </div>
      </div>
      <div class="main">
        <div class="wrap">
          <div class="left-module-box">
            <el-menu
              :default-active="active"
              :collapse-transition="true"
              :unique-opened="true"
              :background-color="switchValue=='light'?'#FFF':'rgba(37, 43, 90, 0.88)'"
              :text-color="switchValue=='light'?'#333':'#fff'"
              active-text-color="#5ca7ff"
              style="width: 100%;min-height: 80vh;"
            >
              <div v-for="(item, index) in menuList" :key="index">
                <el-menu-item
                  v-if="item.childs.length == 0"
                  :index="item.id"
                  @click="getleaderData(item.name)"
                >
                  <template>
                    <div style="display: flex; align-items: center">
                      <img
                        v-if="switchValue == 'light'"
                        src="../assets/image/leaderIconLight.png"
                        style="width: 20px; height: 20px"
                        alt=""
                      />
                      <img
                        v-else
                        src="../assets/image/leaderIconDark.png"
                        style="width: 20px;height: 20px"
                        alt=""
                      />
                      <span style="padding-left: 20px">{{ item.name }}</span>
                    </div>
                  </template>
                </el-menu-item>
                <el-submenu v-else :index="item.id">
                  <template slot="title">
                    <div style="display: flex; align-items: center">
                      <img
                        v-if="switchValue == 'light'"
                        src="../assets/image/group_Light.png"
                        style="width: 20px; height: 20px"
                        alt=""
                      />
                      <img
                        v-else
                        src="../assets/image/group_Dark.png"
                        style="width: 20px; height: 20px"
                        alt=""
                      />
                      <span style="padding-left: 20px">{{ item.name }}</span>
                    </div>
                  </template>
                  <div v-for="(item2, index2) in item.childs" :key="index2">
                    <el-menu-item
                      :index="item2.ID"
                      @click="getLeader2Data(item2.ID, item2.NAME)"
                    >
                      {{ item2.NAME }}</el-menu-item
                    >
                  </div>
                </el-submenu>
              </div>
            </el-menu>
          </div>
          <div class="right-module-box">
            <div class="deptBox" v-if="showBox == 'leader'" v-loading="leaderLoad">
              <div class="deptTit">
                {{ deptTit }}
              </div>
              <div
                v-for="(item, index) in leaderList"
                :key="index"
                style="display: flex; box-size: border-box; margin-top: 20px"
              >
                <div style="width: 90px; height: 130px">
                  <el-popover
                    placement="right"
                    trigger="hover"
                    width="270"
                    title=""
                  >
                    <img
                      :src="'http://172.18.2.232:8888/' + item.PORTRAIT"
                      style="width: 270px; height: 390px"
                      alt=""
                    />
                    <img
                      slot="reference"
                      :src="'http://172.18.2.232:8888/' + item.PORTRAIT"
                      style="width: 90px; height: 130px"
                      alt=""
                    />
                  </el-popover>
                </div>
                <div
                  class="infoBpx"
                  style="display: flex; flex-direction: column;width:100%"
                >
                  <p>
                    <span
                      style="
                        color: #409eff;
                        font-weight: 600;
                        font-size: 16px;
                        padding-right: 20px;
                      "
                      >{{ item.NAME }}</span
                    ><span>{{ item.DUTYNAME }}</span>
                  </p>
                  <p>座机：{{ item.TEL }}</p>
                  <p>门牌号：{{ item.FLOORNUMBER }}</p>
                  <p>
                    <span style="color: #409eff">职位分工：</span
                    ><span>{{ item.DUTY }}</span>
                  </p>
                </div>
              </div>
              <el-empty :image-size="200" description="没有查到人员信息" v-if="leaderList.length==0" style="min-height: 80vh;"></el-empty>
              <p style="color:red;font-size:14px">提示：若信息有错漏，请联系国土信息中心（61884124）修改。</p>
              
            </div>
            <div class="deptBox" v-if="showBox == 'bmleader'" v-loading="bmLoad">
              <div class="deptTit">
                {{ deptTit }}
              </div>
              <p>{{ leader2List.duty }}</p>
              <div
                v-for="(item, index) in bmNameList"
                :key="index"
                style="
                  display: flex;
                  box-size: border-box;
                  margin-top: 20px;
                  flex-direction: column;
                  align-content: flex-start;
                "
              >
                <div class="leaderTit">{{ item }}</div>
                <div style="display: flex; width: 100%; flex-wrap: wrap">
                  <div
                    v-for="(item2, index2) in leader2List.data[item]"
                    :key="index2"
                    style="display: inline-flex; margin-top: 10px; width: 50%"
                  >
                    <div style="width: 90px; height: 130px">
                      <el-popover
                        placement="right"
                        trigger="hover"
                        width="270"
                        title=""
                      >
                        <img
                          :src="'http://172.18.2.232:8888/' + item2.PORTRAIT"
                          style="width: 270px; height: 390px"
                          alt=""
                        />
                        <img
                          slot="reference"
                          :src="'http://172.18.2.232:8888/' + item2.PORTRAIT"
                          style="width: 90px; height: 130px"
                          v-if="item2.PORTRAIT"
                          alt=""
                        />
                      </el-popover>
                      <el-popover
                        placement="right"
                        trigger="hover"
                        width="270"
                        title=""
                      >
                        <img
                          src="../assets/image/imgemty.png"
                          style="width: 270px; height: 390px"
                          alt=""
                        />
                        <img
                          slot="reference"
                          src="../assets/image/imgemty.png"
                          style="width: 90px; height: 130px"
                          alt=""
                          v-if="!item2.PORTRAIT"
                        />
                      </el-popover>
                    </div>
                    <div
                      class="infoBpx"
                      style="display: flex; flex-direction: column;width:100%"
                    >
                      <p>
                        <span
                          style="
                            color: #409eff;
                            font-weight: 600;
                            font-size: 16px;
                            padding-right: 20px;
                          "
                          >{{ item2.NAME }}</span
                        ><span>{{ item2.DUTYNAME }}</span>
                      </p>
                      <p>座机：{{ item2.TEL }}</p>
                      <p>门牌号：{{ item2.FLOORNUMBER }}</p>
                    </div>
                  </div>
                </div>
              </div>
              <el-empty :image-size="200" description="没有查到人员信息" v-if="bmNameList.length==0" style="min-height: 80vh;"></el-empty>
              <p style="color:red;font-size:14px">提示：若信息有错漏，请联系国土信息中心（61884124）修改。</p>

            </div>
            <div class="deptBox" v-if="showBox == 'search'" v-loading="searchLoad">
              <div v-for="(item, index) in bmNameList" :key="index">
                <div class="deptTit">
                  {{ item }}
                </div>
                <div v-if="item == '局领导'">
                  <div
                    v-for="(item2, index2) in leader3List[item].bmNameList"
                    :key="index2"
                    style="margin-top: 10px"
                  >
                    <div
                      v-for="(item3, index3) in leader3List[item][item2]"
                      :key="index3"
                      style="display: flex"
                    >
                      <div style="width: 90px; height: 130px">
                        <el-popover
                          placement="right"
                          trigger="hover"
                          width="270"
                          title=""
                        >
                          <img
                            :src="'http://172.18.2.232:8888/' + item3.PORTRAIT"
                            style="width: 270px; height: 390px"
                            alt=""
                          />
                          <img
                            slot="reference"
                            :src="'http://172.18.2.232:8888/' + item3.PORTRAIT"
                            style="width: 90px; height: 130px"
                            alt=""
                            v-if="item3.PORTRAIT"
                          />
                        </el-popover>
                        <el-popover
                          placement="right"
                          trigger="hover"
                          width="270"
                          title=""
                        >
                          <img
                            src="../assets/image/imgemty.png"
                            style="width: 270px; height: 390px"
                            alt=""
                          />
                          <img
                            slot="reference"
                            src="../assets/image/imgemty.png"
                            style="width: 90px; height: 130px"
                            alt=""
                            v-if="!item3.PORTRAIT"
                          />
                        </el-popover>
                      </div>
                      <div
                        class="infoBpx"
                        style="display: flex; flex-direction: column;width:100%"
                      >
                        <p>
                          <span
                            style="
                              color: #409eff;
                              font-weight: 600;
                              font-size: 16px;
                              padding-right: 20px;
                            "
                            >{{ item3.NAME }}</span
                          ><span>{{ item3.DUTYNAME }}</span>
                        </p>
                        <p>座机：{{ item3.TEL }}</p>
                        <p>门牌号：{{ item3.FLOORNUMBER }}</p>
                        <p>
                          <span style="color: #409eff">职位分工：</span
                          ><span>{{ item3.DUTY }}</span>
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
                <div v-else>
                  <!-- <div v-for="(item,index) in bmNameList" :key="index" style="display:flex;box-size:border-box;margin-top:20px;flex-direction: column;align-content: flex-start;"> -->
                  <div
                    style="
                      display: flex;
                      width: 100%;
                      flex-wrap: wrap;
                      flex-direction: column;
                    "
                  >
                    <div
                      v-for="(item2, index2) in leader3List[item].bmNameList"
                      :key="index2"
                    >
                      <div class="leaderTit">{{ item2 }}</div>
                      <div style="display: flex; width: 100%; flex-wrap: wrap">
                        <div
                          v-for="(item3, index3) in leader3List[item][item2]"
                          :key="index3"
                          style="
                            display: inline-flex;
                            margin-top: 10px;
                            width: 50%;
                          "
                        >
                          <div style="width: 90px; height: 130px">
                            <el-popover
                              placement="right"
                              trigger="hover"
                              width="270"
                              title=""
                            >
                              <img
                                :src="
                                  'http://172.18.2.232:8888/' + item3.PORTRAIT
                                "
                                style="width: 270px; height: 390px"
                                alt=""
                              />
                              <img
                                slot="reference"
                                :src="
                                  'http://172.18.2.232:8888/' + item3.PORTRAIT
                                "
                                style="width: 90px; height: 130px"
                                alt=""
                                v-if="item3.PORTRAIT"
                              />
                            </el-popover>
                            <el-popover
                              placement="right"
                              trigger="hover"
                              width="270"
                              title=""
                            >
                              <img
                                src="../assets/image/imgemty.png"
                                style="width: 270px; height: 390px"
                                alt=""
                              />
                              <img
                                slot="reference"
                                src="../assets/image/imgemty.png"
                                style="width: 90px; height: 130px"
                                alt=""
                                v-if="!item3.PORTRAIT"
                              />
                            </el-popover>
                          </div>
                          <div
                            class="infoBpx"
                            style="display: flex; flex-direction: column;width:100%"
                          >
                            <p>
                              <span
                                style="
                                  color: #409eff;
                                  font-weight: 600;
                                  font-size: 16px;
                                  padding-right: 20px;
                                "
                                >{{ item3.NAME }}</span
                              ><span>{{ item3.DUTYNAME }}</span>
                            </p>
                            <p>座机：{{ item3.TEL }}</p>
                            <p>门牌号：{{ item3.FLOORNUMBER }}</p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- </div> -->
                </div>
              </div>
              <el-empty :image-size="200" description="没有查到人员信息" v-if="bmNameList.length==0" style="min-height: 80vh;"></el-empty>
              <p style="color:red;font-size:14px">提示：若信息有错漏，请联系国土信息中心（61884124）修改。</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <footerCom></footerCom>
  </div>
</template>

<script>
import footerCom from "./footerCom.vue";
import HeaderCom2 from "./headerCom2.vue";
export default {
  // name: "userInfo",
  props: {},
  components: { footerCom, HeaderCom2 },
  data() {
    return {
      curMenu: "通讯录",
      interfaceName: "antu.newportal-zjx.provider.txl.TxlProvider",
      switchValue: "light",
      menuList: [],
      active: 0,
      deptTit: "局领导",
      leaderList: [],
      leader2List: [],
      leader3List: [],
      bmNameList: [],
      showBox: "leader",
      keyWords: "",
      switchValue: "dark",
      leaderLoad:false,
      searchLoad:false,
      bmLoad:false
    };
  },
  created() {
    this.getUserStyle();
    this.getMenu();
    this.getleaderData("局领导");
  },
  methods: {
    getMenu() {
      this.$.ajax({
        url: this.$API.ajaxPath,
        type: "post",
        data: {
          interfaceName: this.interfaceName,
          methodName: "getTxlNavList",
          args: [""],
        },
        dataType: "json",
        success: (response) => {
          if (response.status == "0") {
            console.log(JSON.parse(response.result));
            this.menuList = JSON.parse(response.result);
          }
        },
        error: (xhr) => {
          console.log(xhr);
        },
      });
    },
    getleaderData(name) {
      this.showBox = "leader";
      this.deptTit = name;
      this.leaderLoad = true
      this.$.ajax({
        url: this.$API.ajaxPath,
        type: "post",
        data: {
          interfaceName: this.interfaceName,
          methodName: "getTxlJLDList",
          args: [""],
        },
        dataType: "json",
        success: (response) => {
          if (response.status == "0") {
            console.log(JSON.parse(response.result));
            this.leaderList = JSON.parse(response.result);
            this.leaderLoad = false
          }
        },
        error: (xhr) => {
          console.log(xhr);
        },
      });
    },
    getLeader2Data(id, name) {
      this.showBox = "bmleader";
      this.deptTit = name;
      (this.bmNameList = []), (this.leader2List = []);
      this.bmLoad = true
      this.$.ajax({
        url: this.$API.ajaxPath,
        type: "post",
        data: {
          interfaceName: this.interfaceName,
          methodName: "getTxlUserList",
          args: [id],
        },
        dataType: "json",
        success: (response) => {
          if (response.status == "0") {
            console.log(JSON.parse(response.result));
            this.leader2List = JSON.parse(response.result);
            // debugger
            for (var k in this.leader2List.data) {
              console.log(k);
              this.bmNameList.push(k);
            }
            this.bmLoad = false
          }
        },
        error: (xhr) => {
          console.log(xhr);
        },
      });
    },
    search() {
      this.showBox = "search";
      let arr = [];
      this.bmNameList = [];
      this.searchLoad = true
      this.$.ajax({
        url: this.$API.ajaxPath,
        type: "post",
        data: {
          interfaceName: this.interfaceName,
          methodName: "TxlHighSearch",
          args: [this.keyWords],
        },
        dataType: "json",
        success: (response) => {
          if (response.status == "0") {
            this.leader3List = JSON.parse(response.result);
            // debugger
            for (var k in this.leader3List) {
              console.log(k);
              arr = [];
              this.bmNameList.push(k);
              for (var s in this.leader3List[k]) {
                arr.push(s);
              }
              this.leader3List[k].bmNameList = arr;
              this.searchLoad = false
            }
          }
        },
        error: (xhr) => {
          console.log(xhr);
        },
      });
    },
    getUserStyle() {
      let that = this;
      this.$.ajax({
        url: this.$API.ajaxPath,
        type: "post",
        data: {
          interfaceName: "antu.newportal-zjx.provider.user.UserProvider",
          methodName: "getUserStyle",
          args: [localStorage.getItem("USER_ID")],
        },
        dataType: "json",
        success: (response) => {
          if (response.status == "0") {
            if (response.result == "0") {
              that.switchValue = "dark";
            } else {
              that.switchValue = "light";
            }
          }
        },
        error: (xhr) => {
          console.log(xhr);
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
@import "./css/light.less";
// @import "./css/blue.less";
@import "./css/dark.less";
.second-page {
  .wrap {
    width: 100%;
    display: flex;
    height: 100%;
    align-items: flex-end;
    padding: 0 200px;
    box-sizing: border-box;
    position: relative;
    justify-content: space-between;
    .banner-left-title {
      padding: 20px 35px;
      box-sizing: border-box;
      width: 30%;
      height: 1.6rem;
      background-color: #0085ff;
      border-radius: 5px 5px 0px 0px;
      position: relative;
      display: inline-flex;
      align-items: center;
      p {
        margin: 0;
        font-size: .6rem;
        font-weight: bolder;
        color: #fff;
      }
    }
  }
  .banner-left-title::before {
    content: "";
    width: 5px;
    height: 25px;
    opacity: 1;
    background: #ffffff;
    position: absolute;
    left: 20px;
  }
  .banner {
    width: 100%;
    height: 3rem;
    background-image: url(../assets/image/banner-bg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
  }
}
.home_dark .header {
  width: 100%;
  height: 94px;
  padding: 32px 41px 0 0;
  background-color: #181b2d;
  -webkit-box-shadow: 0px 5px 5px 0px rgb(0 0 0 / 6%);
  box-shadow: 0px 5px 5px 0px rgb(0 0 0 / 6%);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.home_dark .header .title {
  width: 500px;
  height: 36px;
  float: left;
  background: url(/static/img/title_01.cd5be31.png) no-repeat;
  background-size: 100% 100%;
  margin-left: 107px;
}
.home_light .el-menu {
  width: 100%;
  background-color: #fff !important;
  .el-menu-item {
    background: #fff;
  }
  .is-opened {
    .el-submenu__title {
      border-left: 2px solid #409eff;
    }
  }
}
.main {
  .wrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    .left-module-box {
      display: inline-flex;
      width: 30%;
    }
    .right-module-box {
      display: inline-flex;
      width: 69%;
      background-color: #fff;
      padding: 0 20px 20px;
      box-sizing: border-box;
    }
  }
}
.submenu-title-noDropdown,
.el-submenu__title {
  font-size: 16px !important;
}
.infoBpx {
  padding-left: 20px;
  p {
    margin: 0;
    font-size: 14px;
    padding-bottom: 10px;
    span {
      font-size: 14px;
    }
  }
}
.deptTit {
  font-size: 18px;
  color: #23303d;
  padding: 3px 0 3px 10px;
  border-left: 4px solid #f8ab2c;
  font-weight: bold;
  margin: 20px 0 0;
}
.leaderTit {
  background: url("../assets/image/duty1.png") 0px center no-repeat #fff;
  color: #fff;
  padding: 10px;
}
.home_dark .right-module-box {
  background: linear-gradient(
    180deg,
    #252b5a,
    rgba(37, 43, 90, 0) 100%
  ) !important;
  color: #fff;
}
.home_dark .deptTit {
  color: #fff;
}
.home_dark .leaderTit {
  background-color: rgba(37,43,90,0);
}
.deptBox{
  width: 100%;
}
</style>